<template>
  <view class="container">
    <!-- 头部菜单 -->
    <view class="order-tit">
      <text data-sts="0" :class="sts == 0 ? 'on' : ''" @tap="onStsTap">
        全部
      </text>
      <text data-sts="1" :class="sts == 1 ? 'on' : ''" @tap="onStsTap">
        待支付
      </text>
      <text data-sts="2" :class="sts == 2 ? 'on' : ''" @tap="onStsTap">
        待检测
      </text>
      <text data-sts="3" :class="sts == 3 ? 'on' : ''" @tap="onStsTap">
        待确认
      </text>
      <text data-sts="5" :class="sts == 5 ? 'on' : ''" @tap="onStsTap">
        已完成
      </text>
    </view>
    <!-- end 头部菜单 -->
    <view class="main">
      <view v-if="list.length == 0" class="empty"> 还没有任何相关订单 </view>
      <!-- 订单列表 -->
      <block v-for="(item, index) in list" :key="index">
        <view class="prod-item">
          <view class="order-num">
            <text>订单编号：{{ item.orderNumber }}</text>
            <view class="order-state">
              <text class="order-sts red" v-if="item.refundSts != 0">
                {{ item.refundSts == 1 ? "退款中" : "退款成功" }}
              </text>
              <text
                 v-else
                 :class="
                   'order-sts  '
                   + (item.status == 1 ? 'red' : '')
                   + '  '
                   + (item.status == 5 || item.status == 6 ? 'gray' : '')
                 "
               >
                 {{ getOrderStatusText(item.status) }}
               </text>
              <!-- 添加支付状态显示 -->
              <text v-if="item.isPayed !== undefined" class="pay-status">
                {{ item.isPayed == 1 ? '·已支付' : '·未支付' }}
              </text>
              <view
                v-if="item.status == 5 || item.status == 6"
                class="clear-btn"
              >
                <image
                  src="@/static/images/icon/clear-his.png"
                  class="clear-list-btn"
                  :data-ordernum="item.orderNumber"
                  @tap="delOrderList"
                />
              </view>
            </view>
          </view>

          <!-- 商品列表 -->
          <!-- 一个订单单个商品的显示 -->
          <block v-if="item.orderItemDtos.length == 1">
            <block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
              <view>
                <view
                  class="item-cont"
                  :data-ordernum="item.orderNumber"
                  @tap="toOrderDetailPage"
                >
                  <view class="prod-pic">
                    <image :src="prod.pic" />
                  </view>
                  <view class="prod-info">
                    <view class="prodname">
                      {{ prod.prodName }}
                    </view>
                    <view class="prod-info-cont">
                      {{ prod.skuName }}
                    </view>
                    <view class="price-nums">
                      <text class="prodprice">
                        <text class="symbol"> ￥ </text>
                        <text class="big-num">
                          {{ wxs.parsePrice(prod.price)[0] }}
                        </text>
                        <text class="small-num">
                          .{{ wxs.parsePrice(prod.price)[1] }}
                        </text>
                      </text>
                      <text class="prodcount"> x{{ prod.prodCount }} </text>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </block>
          <!-- 一个订单多个商品时的显示 -->
          <block v-else>
            <view
              class="item-cont"
              :data-ordernum="item.orderNumber"
              @tap="toOrderDetailPage"
            >
              <scroll-view
                scroll-x="true"
                scroll-left="0"
                scroll-with-animation="false"
                class="categories"
              >
                <block
                  v-for="(prod, index2) in item.orderItemDtos"
                  :key="index2"
                >
                  <view class="prod-pic">
                    <image :src="prod.pic" />
                  </view>
                </block>
              </scroll-view>
            </view>
          </block>

          <view class="total-num">
            <text class="prodcount"> 共1件商品 </text>
            <view class="prodprice">
              合计：
              <text class="symbol"> ￥ </text>
              <text class="big-num">
                {{ wxs.parsePrice(item.actualTotal)[0] }}
              </text>
              <text class="small-num">
                .{{ wxs.parsePrice(item.actualTotal)[1] }}
              </text>
            </view>
          </view>
          <!-- end 商品列表 -->
          <view class="prod-foot">
            <view class="btn">
              <text
                v-if="(item.status == 1 || item.status == 2 || item.status == 10) && item.refundSts == 0"
                class="button"
                :data-ordernum="item.orderNumber"
                hover-class="none"
                @tap="onCancelOrder"
              >
                取消订单
              </text>
              <text
                v-if="item.status == 1 || item.status ==10"
                class="button warn"
                :data-ordernum="item.orderNumber"
                hover-class="none"
                @tap="normalPay"
              >
                付款
              </text>
              <text
                v-if="item.status == 3 || item.status == 5"
                class="button"
                :data-ordernum="item.orderNumber"
                hover-class="none"
                @tap="toDeliveryPage"
              >
                查看物流
              </text>
              <text
                v-if="item.status == 3"
                class="button warn"
                :data-ordernum="item.orderNumber"
                hover-class="none"
                @tap="onConfirmReceive"
              >
                确认结果
              </text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <!-- end 订单列表 -->
</template>

<script setup>
const wxs = number();

const sts = ref(0);

/**
 * 根据订单状态值获取对应的文本显示
 */
const getOrderStatusText = (status) => {
  const statusMap = {
    1: '待付款',
    2: '待检测',
    3: '待用户确认',
    4: '待评价',
    5: '成功',
    6: '失败',
    7: '检测中',
    8: '已取消',
    9: '待改价',
    10: '改价完成待支付'
  };

  return statusMap[status] || '已取消';
}
/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  if (options.sts) {
    sts.value = options.sts;
    loadOrderData(options.sts, 1);
  } else {
    loadOrderData(0, 1);
  }
});

const current = ref(1);
const pages = ref(0);
/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom(() => {
  if (current.value < pages.value) {
    loadOrderData(sts.value, current.value + 1);
  }
});

const list = ref([]);
/**
 * 加载订单数据
 */
const loadOrderData = (sts, currentParam) => {
  uni.showLoading(); // 加载订单列表
  http
    .request({
      url: "/p/myOrder/myOrder",
      method: "GET",
      data: {
        current: currentParam,
        size: 10,
        status: sts,
      },
    })
    .then(({ data }) => {
      let listParam = [];
      if (data.current === 1) {
        listParam = data.records;
      } else {
        listParam = list.value;
        Array.prototype.push.apply(listParam, data.records);
      }
      list.value = listParam;
      pages.value = data.pages;
      current.value = data.current;
      uni.hideLoading();
    });
};

/**
 * 状态点击事件
 */
const onStsTap = (e) => {
  sts.value = e.currentTarget.dataset.sts;
  loadOrderData(sts.value, 1);
};

/**
 * 查看物流
 */
const toDeliveryPage = (e) => {
  uni.navigateTo({
    url:
      "/pages/express-delivery/express-delivery?orderNum=" +
      e.currentTarget.dataset.ordernum,
  });
};

/**
 * 取消订单
 */
const onCancelOrder = (e) => {
  const ordernum = e.currentTarget.dataset.ordernum;
  uni.showModal({
    title: "",
    content: "要取消此订单？",
    confirmColor: "#3e62ad",
    cancelColor: "#3e62ad",
    cancelText: "否",
    confirmText: "是",

    success(res) {
      if (res.confirm) {
        uni.showLoading({
          mask: true,
        });
        http
          .request({
            url: "/p/myOrder/cancel/" + ordernum,
            method: "PUT",
            data: {},
          })
          .then(() => {
            loadOrderData(sts.value, 1);
            uni.hideLoading();
          });
      }
    },
  });
};

/**
 * 模拟支付，直接提交成功
 * @param e
 */
const normalPay = (e) => {
  uni.showLoading({
    mask: true,
  });
  uni.login({
    success: (res) => {
      http
        .request({
          url: "/p/order/pay",
          method: "POST",
          data: {
            wxCode: res.code,
            orderNumbers: e.currentTarget.dataset.ordernum,
          },
        })
        .then(({ data }) => {
          uni.hideLoading();
          if (data) {
            console.log(data, "data");
            const payData = data.data.pay_params;
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: payData.timeStamp,
              nonceStr: payData.nonceStr,
              package: payData.package,
              signType: payData.signType,
              paySign: payData.paySign,
              success: (res) => {
                // 支付成功
                uni.showToast({
                  title: "支付成功",
                  complete() {
                    // 发送事件给父组件，刷新页面
                    uni.redirectTo({
                      url: "/pages/orderList/orderList",
                    });
                  },
                });
              },
              fail: (err) => {
                // 支付失败
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                });
              },
            });
          } else {
            uni.showToast({
              title: "支付失败！",
              icon: "none",
            });
          }
        });
    },
  });
};

/**
 * 查看订单详情
 */
const toOrderDetailPage = (e) => {
  uni.navigateTo({
    url:
      "/pages/order-detail/order-detail?orderNum=" +
      e.currentTarget.dataset.ordernum,
  });
};

/**
 * 确认收货
 */
const onConfirmReceive = (e) => {
  uni.showModal({
    title: "",
    content: "我已确认结果？",
    confirmColor: "#0f3679",

    success(res) {
      if (res.confirm) {
        uni.showLoading({
          mask: true,
        });
        http
          .request({
            url: "/p/myOrder/receipt/" + e.currentTarget.dataset.ordernum,
            method: "PUT",
          })
          .then(() => {
            loadOrderData(sts.value, 1);
            uni.hideLoading();
          });
      }
    },
  });
};

/**
 * 删除已完成||已取消的订单
 * @param e
 */
const delOrderList = (e) => {
  uni.showModal({
    title: "",
    content: "确定要删除此订单吗？",
    confirmColor: "#0f3679",

    success(res) {
      if (res.confirm) {
        const ordernum = e.currentTarget.dataset.ordernum;
        uni.showLoading();

        http
          .request({
            url: "/p/myOrder/" + ordernum,
            method: "DELETE",
          })
          .then(() => {
            loadOrderData(sts.value, 1);
            uni.hideLoading();
          });
      }
    },
  });
};
</script>

<style scoped lang="scss">
@import "./orderList.scss";
</style>
